<template>
  <basic-container>
    <el-dialog top="5vh" title="审批日志" :visible.sync="dialog" height="450" width="50vw" @open="showFlowBox()" @close="closeFlowDialog()">
      <div style="margin-top: 10px">
        <ul class="process-image-box">
          <li v-for="(item, i) in auditProcessList" :key="item.id" :class="item.complete | flowCompleteCls">
            <i class="line" v-if="i !== 0"></i>
            <div class="processContent">
              <div class="quadrilateral" :style="{'padding-top': item.typeName ? '15px' : '0'}">
                <div class="min-title" v-if="item.typeName">{{ item.typeName }}</div>
                <div class="min-title min-title-current" v-if="item.complete === 2">当前</div>
                <div v-for="col in item.users" :key="col.realName">
                  <span>{{ col.realName || '--' }}</span>
                  <i class="el-icon-success processSuccess" v-if="col.status === 3"></i>
                  <i class="el-icon-circle-close processFail" v-if="col.status === 2"></i>
                </div>
              </div>
              <div class="quadrilateral-tips" v-if="item.flowName">{{item.flowName}}</div>
            </div>
          </li>
        </ul>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activitiAuditLogs"
          :key="index"
          :timestamp="activity.updateTime">
          [{{activity.taskName}}] {{activity.userName}} <el-tag :type="activity.status | approveStatusTag">{{ activity.status | approveStatus }}</el-tag><br/>
          备注：{{activity.comment}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </basic-container>
</template>
<script>
import {getActivitiLogs, listProcessTasks} from "@/api/act/task";

export default {
  props: {
    dialog: Boolean,
    processId: {
      type: String
    }
  },
  data() {
    return {
      activitiAuditLogs: [], // 审批日志

      auditProcessList: [],
    }
  },
  created() {
  },
  methods: {
    closeFlowDialog() {
      this.$emit('closeDialog', false)
    },
    showFlowBox() {
      this.auditProcessList = [];
      listProcessTasks(this.processId).then((res) => {
        this.auditProcessList = res.data.data;
      });
      this.activitiAuditLogs = [];
      getActivitiLogs(this.processId).then((res) => {
        this.activitiAuditLogs = res.data.data;
      });
    }
  }
}
</script>
